<template>
  <div class="mainContainer">
    <el-dialog width="50%"
               title="上传资源"
               :visible.sync="showUploadAssetDialog"
    >
      <el-upload
        class="upload-demo"
        drag
        action="http://localhost:40000/uploadWorkAsset"
        :auto-upload=false
        ref="upload"
        :with-credentials="true"
        :data="{wid: this.currentWorkID}"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
      <el-button class="button" type="primary" @click="upload">上传</el-button>
    </el-dialog>
    <el-dialog
      title="创建作品"
      width="50%"
      :visible.sync="showCreateWorkDialog"
    >
      <div class="createWorkContainer">
        <el-steps class="createWorkSteps" :active="createWorkStep" :space="200" finish-status="success" align-center>
          <el-step title="填写信息"></el-step>
          <el-step title="上传文件"></el-step>
          <el-step title="添加资源"></el-step>
        </el-steps>
        <div class="createWorkStep" v-show="createWorkStep === 0">
          <div class="workProperties">
            <div class="property">
              <span class="propertyKey">作品名称： </span>
              <el-input type="text" class="propertyValue" v-model="createWorkData.name"></el-input>
              <div class="emptyNameError" v-show="showWorkNameEmpty"><span>请填写此字段</span></div>
            </div>
            <div class="property">
              <span class="propertyKey">作品简介： </span>
              <el-input type="textarea" :row="3" class="propertyValue" v-model="createWorkData.description"></el-input>
            </div>
          </div>
          <div class="property captcha">
            <span class="propertyKey">验证码：</span>
          </div>
          <el-button type="primary" class="nextButton button" @click="checkCreateWorkData">下一步</el-button>
        </div>
        <div class="createWorkStep" v-show="createWorkStep === 1">
          <span style="font-size: 20px;">请上传介绍文件（Markdown格式）</span>
          <el-upload
            class="upload-demo"
            drag
            action="/uploadWorkIntroduction"
            :auto-upload=false
            ref="uploadIntroduce"
            :with-credentials="true"
            :data="{wid: this.currentWorkID}"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
          <el-button type="primary" class="nextButton button" @click="createWorkStep ++">下一步</el-button>
          <el-button class="nextButton button" @click="createWorkStep --">上一步</el-button>
          <el-button class="button nextButton" style="float: left" type="primary" @click="uploadIntroduce">上传</el-button>
        </div>
        <div class="createWorkStep" v-show="createWorkStep === 2"></div>
      </div>
    </el-dialog>
    <div class="card mainCard">
      <span class="cardTitle">作品管理</span>
      <div class="selfWorksContainer">
        <div class="work" v-for="(work,i) in selfWorks" v-bind:key="work.id">
          <div class="workLeftPart" @click="toWorkPage(work)">
            <img :src="'http://localhost:10001/work/' + work.realID + '/hdImg.png'" class="workHeadImg">
            <span v-if="work.enable === 0" class="checking">[审核中]</span>
            <span v-text="work.name" class="workName"></span>
            <i class="fa fa-pencil-square editName" aria-hidden="true" @click="renameWork(work, i)"></i>
          </div>
          <div class="workRightPart">
            <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
            <span v-text="work.likes" class="workLikes"></span>
            <i class="fa fa-archive"></i>
            <span v-text="work.assets" class="workAssets"></span>
            <div class=options>
              <span class="option" @click="showUploadDialog(work.realID)">上传资源</span>
            </div>
          </div>
        </div>
      </div>
      <el-button class="createWork button" type="primary" @click="showCreateWorkDialog = true">创建作品</el-button>
    </div>
  </div>
</template>

<script>
import work from '../../api/work'
import auth from '../../api/auth'
// import { dataAxios } from '../../api/base'
// import upload from '../../util/uploadutil'
export default {
  name: 'workManage',
  data () {
    return {
      selfWorks: null,
      currentSelfWorkPage: 1,
      showUploadAssetDialog: false,
      showCreateWorkDialog: false,
      currentWorkID: 0,
      widAndRealIDIndex: {},
      createWorkStep: 0,
      createWorkCAPTCHA: {
        codeID: '',
        codeURL: '',
        codeStr: '',
        requestKey: ''
      },
      createWorkData: {
        name: '',
        description: ''
      },
      showWorkNameEmpty: false
    }
  },
  methods: {
    renameWork: function (row, i) {
      let newName = prompt('新的名字？')
      if (newName === null || newName === '') {
        return
      }
      work.changeWorkName(this, row.realID, newName).then(value => {
        this.selfWorks[i].name = newName
      })
    },
    showUploadDialog: function (id) {
      this.currentWorkID = id
      this.showUploadAssetDialog = true
    },
    toWorkPage: function (row) {
      this.$router.push('/work/' + row.realID)
    },
    upload: function () {
      this.$refs.upload.submit()
    },
    uploadIntroduce: function () {
      this.$refs.uploadIntroduce.submit()
    },
    checkCreateWorkData: function () {
      if (this.createWorkData.name === '') {
        this.showWorkNameEmpty = true
        return
      }
      this.createWorkStep++
    }
  },
  created () {
    work.queryWorksByUser(this, this.currentSelfWorkPage, resp => {
      let data = resp.data
      console.log(data)
      this.selfWorks = data
      this.selfWorks.forEach(ele => {
        let index = this.selfWorks.indexOf(ele)
        this.$set(this.widAndRealIDIndex, ele.realID, index)
        work.queryWorkLikeById(this, ele.realID).then(result => {
          this.$set(this.selfWorks[index], 'likes', result)
        })
      })
    })
  },
  watch: {
    showCreateWorkDialog: function (newVal, oldVal) {
      if (newVal) {
        auth.generateValidCode(this, (resp) => {
          this.createWorkCAPTCHA.codeID = resp.data
          this.createWorkCAPTCHA.codeURL = 'http://localhost:40000/getValidCode?codeid=' + resp.data
        })
      }
    }
  }
}
</script>

<style src="../../style/workManage.less" lang="less" scoped></style>
